<template>
  <div class="detail">
    <c-list :column="3">
      <c-list-item label="整改任务号" :value="detail.taskCode" />
      <c-list-item label="所属验收任务号" :value="detail.acceptTaskCode" />
      <c-list-item label="门店建设项目号" :value="detail.constCode" />
      <c-list-item label="所属门店编码" :value="detail.shopCode" />
      <c-list-item label="所属门店" :value="detail.shopName" />
      <c-list-item label="门头装修总面积" suffix="m²" :value="detail.dheadDecorationTotalArea || 0" />
      <c-list-item label="卖场装修总面积" suffix="m²" :value="detail.shopDecorationTotalArea || 0" />
      <c-list-item label="门头实际验收面积" suffix="m²" :value="detail.acceptDheadTotalArea || 0" />
      <c-list-item label="卖场实际验收面积" suffix="m²" :value="detail.acceptShopTotalArea || 0" />

      <c-list-item label="所属办事处" :value="detail.officeName" />
      <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detail.marketType" />
      <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detail.constType" />
      <c-list-item label="整改类型" dict-type-code="ACCEPT_TYPE" :value="detail.rectifyType" />
      <c-list-item label="整改步骤" dict-type-code="RECTIFY_STEPS" :value="detail.steps" />
      <c-list-item label="实际验收时间" :value="detail.actualAcceptTime" />
      <c-list-item v-if="rectifyType === 'SOFT'" label="责任归属" :value="detail.belongDuty" />
      <c-list-item label="整改验收责任人" :value="detail.acceptPrincipalName" />
      <c-list-item label="工程监理" :value="detail.proSupervisorName" />
      <c-list-item label="形象督导" :value="detail.formSupervisorName" />
      <c-list-item label="BPM审批意见" :span="3" :value="detail.preLastOpinion" />
    </c-list>
    <c-table-box :index="false" table-height="400" :data="tableData" hide-func :table-config="tableConfig">
      <el-table-column slot="before" type="expand" width="50">
        <template v-slot="{row}">
          <div style="padding:10px">
            <c-table-box :index="false" auto-height :data="row.problemDetailDTOList" hide-func :setting="false" :table-config="tableConfig1">
              <!-- <el-table-column min-width="200" label="验收问题说明">
                <template slot-scope="scope">
                  <el-tooltip v-if="scope.row.problemDesc" effect="dark" placement="top-start">
                    <span style="min-width:200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                      {{ scope.row.problemDesc }}
                    </span>
                    <template #content>
                      <div style="white-space:pre-wrap">{{ scope.row.problemDesc }}</div>
                    </template>
                  </el-tooltip>
                </template>
              </el-table-column> -->
            </c-table-box>
          </div>
        </template>
      </el-table-column>
    </c-table-box>
    <c-section title="整改附件">
      <c-file-table-box v-model="files" :editable="false" type-code="ACCESS031" :model-id="$route.query.id" />
    </c-section>
    <div class="btn-container">
      <c-button type="primary" @click="clickBackHandle">返回</c-button>
    </div>
  </div>
</template>
<script>
import { getOneDetail } from '@/api/rectify'
export default {
  name: 'RectifyDetail',
  props: {
    rectifyType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'belongDuty',
            label: '责任归属'
          },
          {
            prop: 'principalName',
            label: '责任人'
          },
          // {
          //   prop: 'actualAcceptTime',
          //   label: '实际验收时间',
          //   formatData: this.$parseTimeYMD('actualAcceptTime')
          // },
          {
            prop: 'mustRectifyEndTime',
            label: '应整改完成时间',
            formatData: this.$parseTimeYMD('mustRectifyEndTime')
          },
          {
            prop: 'actualRectifyEndTime',
            label: '实际整改完成时间',
            formatData: this.$parseTimeYMD('actualRectifyEndTime')
          }
        ]
      },
      tableConfig1: {
        setting: [
          {
            prop: 'problemType',
            label: '问题分类',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PROBLEM_CATEGORY'
            }
          },
          {
            prop: 'problemDesc',
            label: '验收问题说明',
            minWidth: 200,
            render: function(createElement, rows) {
              if (rows.problemDesc) {
                return (<div style='white-space:pre-wrap'>{rows.problemDesc }</div>
                )
              }
              return ''
            }
          },
          {
            prop: 'rectifyResult',
            label: '整改结果'
          }
        ]
      },
      files: [],
      detail: {},
      tableData: []
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const { id } = this.$route.query
      getOneDetail(id).then(res => {
        this.detail = res.data
        this.tableData = this.detail.problemList.filter(e => e.acceptResult !== 'ONE_OFF')
        if (!this.detail.actualAcceptTime && this.tableData.length > 0) {
          this.$set(this.detail, 'actualAcceptTime', this.tableData[0].actualAcceptTime)
        }
      })
    },
    clickBackHandle() {
      this.$store.dispatch('views/goBack')
    }
  }
}
</script>
